<template>
    <div class="web-visitor-box flex-center-col">
        <div>本机ip:
            <span style="color:tomato;font-size: 25px" >{{obj.addr.ip}}
            </span>
        </div>
        <div class="flex-center" style="width: 100%;min-height: 600px;flex-wrap: wrap;">
            <el-card class="web-visitor-card" v-for="(item,index) in obj.list">
                <div slot="header" class="web-visitor-card-head">
                    <span>{{item.title}}</span>
                    <span @click="showMoreInfo(item.value)"
                          class="web-visitor-card-head-more"
                            v-show="!item.length"
                    >
                        查看详情
                    </span>
                </div>
<!--                展示数量:有长度得长度，无长度得数组长度-->
                <div class="web-visitor-card-content flex-center-col">
                    {{item.length?item.length:item.value.length}}
                </div>
            </el-card>

        </div>








<!--        具体ip展示-->
        <el-dialog title="访客详情" v-model="obj.showMoreInfo">
            <el-table :data="obj.moreInfoList"  stripe border height="250">
                <el-table-column property="row.index" label="序号" width="70">
                    <template #default="scope">
                        <i class="el-icon-caret-right"></i>
                        <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="ip" label="ip" width="320"></el-table-column>
                <el-table-column property="date" label="时间" width="320"></el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script >
    import {reactive} from "@vue/reactivity";
    import service from "@/assets/js/service";
    import {onMounted} from "@vue/runtime-core";
    import {errorMessage} from "@/assets/js/utils";

    export default {
        name: "WebVisitor",
        setup(){

            let obj=reactive({
                addr:{},
                moreInfoList:[],
                showMoreInfo:false,
                dayVisitorList:[],
                weekVisitorList:[],
                monthVisitorList:[],
                yearVisitorList:[],

                // 用于循环渲染ip卡片
                list:{
                    day:{
                        title:"本日访问",
                        // 传递给具体ip详情页面
                        value:[]
                    },
                    week:{
                        title:"本周访问",
                        value:[]
                    },
                    moth:{
                        title:"本月访问",
                        value:[]
                    },
                    year:{
                        title:"本年访问",
                        value:[],
                        length:0
                    }
                }
            })

            let initDayVisitor=()=>{
               let data= service.getVisitor('day',true)
                data.then(resp=>{
                    if(resp.code === 200){
                        obj.dayVisitorList=resp.data
                        // 加入list好遍历

                        obj.list.day.value=obj.dayVisitorList

                    }else{
                        errorMessage(resp.msg)
                    }
                })
            }
            let initWeekVisitor=()=>{
                let data= service.getVisitor('week',true)
                data.then(resp=>{
                    if(resp.code === 200){
                        obj.weekVisitorList=resp.data
                        obj.list.week.value=obj.weekVisitorList
                    }else{
                        errorMessage(resp.msg)
                    }
                })
            }
            let initMonthVisitor=()=>{
                let data= service.getVisitor('month',true)
                data.then(resp=>{
                    if(resp.code === 200){
                        obj.monthVisitorList=resp.data
                        obj.list.moth.value=obj.monthVisitorList
                    }else{
                        errorMessage(resp.msg)
                    }
                })
            }
            let initYearVisitor=()=>{
                let data= service.getVisitor('year',false)
                data.then(resp=>{
                    if(resp.code === 200){

                        // 此处只传数组大小，不传具体数组

                        obj.list.year.length=resp.data
                    }else{
                        errorMessage(resp.msg)
                    }
                })
            }

            let initVisitor=()=>{
                initDayVisitor()
                initWeekVisitor()
                initMonthVisitor()
                initYearVisitor()
            }

            let showMoreInfo=(list)=>{
                obj.moreInfoList=list
                obj.showMoreInfo=true
            }
            let initAddr=()=>{

                    let data= service.getAddr()
                    data.then(resp=>{
                        if(resp.code === 200){
                            obj.addr=resp.data
                        }
                    })

            }
            onMounted(()=>{
                initVisitor()

                // 此处实现持续请求，动态更新ip数据
                // setInterval(()=>{
                //     initVisitor()
                // },1000*10)
                initAddr()
            })
            return{
                obj,
               showMoreInfo
            }
        }
    }
</script>

<style scoped lang="less">
    .web-visitor-box{
        width: 100%;


        .web-visitor-card{
            width:400px;
            height: 150px;
            margin: 0 30px 30px 30px;
            .web-visitor-card-head{
                text-align: left;
                font-size: 20px;
                .web-visitor-card-head-more{
                    float: right;
                    font-size: 14px;
                    color:deepskyblue;
                    cursor: pointer;
                }
                .web-visitor-card-head-more:hover{
                    border-bottom: 1px solid deepskyblue;
                }
            }
            .web-visitor-card-content{
                color: tomato;
                font-size: 30px;
            }
        }
        .web-visitor-card:hover{
            border: 2px solid #7FFFD4;
        }

    }
</style>